<template>
  <div>
    <SearchForm v-model:form-data="form" @search="handleSearch" />
    <PaginationCard
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
      v-loading="isLoading"
    >
      <AppTable :data="tableData" :columns="columns" border />
    </PaginationCard>
  </div>
</template>

<script lang="tsx" setup>
import { computed, onMounted, ref } from 'vue'

import AppTable from '@/components/AppTable/index.vue'
// import SecurityLogTable from './SecurityLogTable.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import usePagination from '@/hooks/usePagination'
import { getSecurityLog } from '@/http/securityLog'
import { ISecurity } from '@/http/types/securityLog'
import { parseDate2Str } from '@/utils/timeUtils'

import SearchForm from './SearchForm.vue'

const columns = ref([
  { label: 'Identity', prop: 'identity' },
  { label: 'action', prop: 'action' },
  { label: 'UserId', prop: 'userId' },
  { label: 'UserName', prop: 'userName' },
  { label: 'ClientId', prop: 'clientId' },
  { label: 'ClientIpAddress', prop: 'clientIpAddress' },
  { label: 'CorrelationId', prop: 'correlationId' },
  {
    label: 'CreationTime',
    prop: 'CreationTime',
    formatter: (row: ISecurity) =>
      parseDate2Str(row.creationTime, 'YYYY-MM-DD HH:mm:ss'),
  },
  {
    label: 'BrowserInfo',
    fixed: 'right',
    render: ({ row }: { row: ISecurity }) => {
      return (
        <el-tooltip
          class="item"
          effect="dark"
          placement="top"
          v-slots={{
            content: () => <div style="width:400px">{row.browserInfo}</div>,
          }}
        >
          <p class="browserInfo">{row.browserInfo}</p>
        </el-tooltip>
      )
    },
  },
])

interface IFormData {
  identity: string
  logAction: string
  userId: string
  userName: string
  clientId: string
  correlationId: string
  date: [string | Date, string | Date] | null
  sorting: string
}
const form = ref<IFormData>({
  identity: '',
  logAction: '',
  userId: '',
  userName: '',
  clientId: '',
  correlationId: '',
  date: ['', ''],
  sorting: '',
})

onMounted(() => {
  getTableData()
})

const params = computed(() => {
  return {
    identity: form.value.identity,
    logAction: form.value.logAction,
    userId: form.value.userId,
    userName: form.value.userName,
    clientId: form.value.clientId,
    correlationId: form.value.correlationId,
    startTime: form.value.date ? form.value.date[0] : '',
    endTime: form.value.date ? form.value.date[1] : '',
  }
})
const {
  isLoading,
  paginationData,
  tableData,
  getTableData,
  handleSearch,
  // handleSortChange
} = usePagination(getSecurityLog, params)
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss';
:deep(.browserInfo) {
  @include mixin.ellipsis(3);
}
</style>
